<template>
  <productResult :num="productCount"></productResult>
  <div class="row-padding">
    <div class="grid--layout">
      <aplusmax-goods-card v-for="item in items" :key="item.goods_id" :goodsInfo="item" @deleteG="deleteG"></aplusmax-goods-card>
    </div>
  </div>
  <div class="q-pa-lg flex flex-center">
    <q-pagination
      v-model="pageObj.page"
      color="black"
      :max="Math.ceil(productCount / pageObj.page_size)"
      :max-pages="6"
      boundary-numbers
      size="16px"
    />
  </div>
</template>

<script setup lang='ts'>
import productResult from "./components/product-result.vue"
import {myCollect} from "../../api/userApi";
import {Notify} from "quasar";
import {reactive, ref} from "vue";
import {goodsList} from "../../api/goods";

const items = ref()
const pageObj = reactive({
  page: 1,
  page_size: 28,
})
const productCount = ref(0)
const getCollect = (payload) => {
  myCollect(payload).then((res) => {
    items.value = res.data.goods_li_info
    productCount.value = res.data.count
    console.log(Math.ceil(productCount.value / pageObj.page_size))
  }).catch((err) => {
    console.log(err)
  });
}
getCollect(pageObj)


const deleteG = (goods_id) => {
  const goodsIndex = items.value.findIndex(obj => obj.goods_id === goods_id)
  if (goodsIndex != -1) {
    items.value.splice(goodsIndex,1)
  }
}
</script>

<style scoped lang='less'>
.grid--layout {
  --grid-gap: 26px;
  --visible-cols: 4;
  --col-gap: var(--grid-gap);
  --col-size: calc((100% - var(--col-gap)*(var(--visible-cols) - 1)) / var(--visible-cols));
  display: grid;
  grid-gap: var(--col-gap);
  grid-template-columns: repeat(var(--visible-cols), var(--col-size));
}
.wrapper{
  display: flex;
}
.row-padding{
  padding: 0 50px;
}
.search{
  margin-right: 30px;
  width: 300px;
}
.sory-icon{
  color: rgba(0,0,0,0.54);
}
.filter{
  display: flex;
}
.store{
  display: flex;
  .btn-push{
    border-radius: 4px;
  }
}
.price{
  display: flex;
  justify-content: center;
  align-items: center;
  .interval{
    margin: 0 2px;
  }
}
.page{
  :deep(.q-icon){
    font-size: 18px;
  }
}
.title{
  margin-bottom: 15px;
}

</style>